<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn></template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="detail(scope.row.id)">
          详情
        </el-button>
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <!-- 详情页 -->
    <pub-page-dialog-close v-model:show="isShow.detailShow">
      <detail-com :com-id="currentId"></detail-com>
    </pub-page-dialog-close>
  </list-page>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { useTable } from '@/hooks/UseTable'
import { get_list } from '@/view/TFGA/TFDJ/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import detailCom from '@/view/TFGA/TFDJ/components/detail.vue'
const isShow = reactive({
  detailShow: false
})
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const currentId = ref('')
const searchColumns = ref([
  {
    label: '探访日期',
    el: 'DateRange',
    bindBegin: 'startTime',
    bindEnd: 'endTime',
    defaultValue: '',
    labelWidth: 80
  },

  {
    label: '探访方式',
    el: 'DictSelect',
    bind: 'visitWayCode',
    code: 'TFGA-TFFS',
    defaultValue: '',
    labelWidth: 80
  },

  {
    label: '数据来源',
    el: 'DictSelect',
    bind: 'visitSource',
    defaultValue: '',
    code: 'SJLY-TF',
    labelWidth: 90
  }
])
const columns = ref([
  { label: '姓名', prop: 'name', width: 100 },
  { label: '证件号码', prop: 'idCard', width: 180 },
  {
    label: '性别',
    prop: 'sexCode',
    width: 60,
    type: 'formatDict',
    formatCode: 'XB'
  },
  { label: '年龄', prop: 'age', width: 60 },
  { label: '联系方式', prop: 'contactNumber' },
  { label: '居住区划', prop: 'areaName', width: 200 },
  { label: '第几次探访服务', prop: 'visitNum' },
  {
    label: '服务方式',
    prop: 'visitWayCode',
    type: 'formatDict',
    formatCode: 'TFGA-TFFS',
    width: '100'
  },
  { label: '服务人员', prop: 'servicePersonnel' },
  { label: '探访日期', prop: 'visitTime' },
  { label: '操作', type: 'option', width: '180', fixed: 'right' }
])
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_list, { elderId: props.id })

const detail = id => {
  currentId.value = id
  isShow.detailShow = true
}

const submitSuccess = val => {
  isShow[val] = false
  search()
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
